import './App.css';
import { BrowserRouter, Route, Routes, Navigate, useNavigate, NavLink, Link } from 'react-router-dom'
import { links, routes } from './route';
import {
  AppstoreOutlined,
  ContainerOutlined,
  DesktopOutlined,
  MailOutlined,
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  PieChartOutlined,
} from '@ant-design/icons'
import { Button, Col, Menu, Row } from 'antd';
import { useState } from 'react';
import { ProductDetail } from './ProductDetail/ProductDetail';
function App() {
  const user = localStorage.getItem('user')
  return (
    <div className="App">
      <Row>
        <h1>{user ? JSON.parse(user).nickname : '未登录'}</h1>
      </Row>
      <Row>
        <Col span={4}>
          <Menu
            mode="vertical"
          >
            {links.map((o, i) => {
              return (<Menu.Item key={'Menu.Item' + i}>
                <Link to={o.path}>{o.title}</Link>
              </Menu.Item>)
            })}
            {/* <Menu.Item key="home">
              <Link to="/">首页</Link>
            </Menu.Item>
            <Menu.Item key="test">
              <Link to="/Test">购物车</Link>
            </Menu.Item>
            <Menu.Item key="test">
              <Link to="/Test">个人中心</Link>
            </Menu.Item> */}
          </Menu>
        </Col>
        <Col span={20}>
          <Routes>
            {routes.map((o, i) => (
              <Route key={'route' + i} exact={o.exact} path={o.path} Component={o.component}></Route>
            ))}
            <Route key={'route'} path={'/ProductDetail/:id'} Component={ProductDetail}></Route>
          </Routes>
        </Col>
      </Row>


    </div>
  );
}

export default App;
